<template>
  <div class="login-container">
    <!-- Logo 区域 -->
    <div class="logo-container">
      <img src="../assets/logo.png" alt="Logo" />
    </div>
    <h3>枸杞工具箱</h3>
    <a-form
      class="login-form"
      :model="loginForm"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item label="账号" name="userAccount">
        <a-input
          v-model:value="loginForm.userAccount"
          placeholder="请输入账号"
        />
      </a-form-item>

      <a-form-item label="密码" name="userPassword">
        <a-input-password
          v-model:value="loginForm.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item inline label="验证码" name="code">
        <a-input
          style="width: 100px; margin-right: 10px"
          v-model:value="loginForm.code"
          placeholder="请输入验证码"
        />
        <a-image
          :preview="false"
          src="http://localhost:8900/api/user/verify"
        ></a-image>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 6, span: 12 }">
        <a-button class="login-button" type="primary" html-type="submit"
          >登录
        </a-button>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 6, span: 12 }">
        <a-button class="register-button" type="primary" @click="turnRegister"
          >注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { userLogin } from "@/api/user";
import { message } from "ant-design-vue";
import router from "@/router";

interface FormState {
  userAccount: string;
  userPassword: string;
  code: string;
  remember: boolean;
}

const loginForm = reactive<FormState>({
  userAccount: "",
  userPassword: "",
  code: "",
  remember: true,
});

const onFinish = (values: any) => {
  userLogin(values)
    .then((res: any) => {
      if (res.code == 0) {
        sessionStorage.setItem("userAccount", loginForm.userAccount);
        message.success("登录成功");
        router.push("/");
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      message.error(err.message);
    });
};
const turnRegister = () => {
  router.push("/register");
};
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: 10px auto;
}

.login-button {
  width: 100%;
}

.register-button {
  width: 100%;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 视口高度 */
  background: linear-gradient(to bottom, #006699, #9abef1);
}

.logo-container {
  display: flex; /* 使用Flexbox */
  align-items: center; /* 水平居中*/
  justify-content: center; /* 垂直居中 */
  margin-bottom: 24px; /* Logo与表单之间的间距 */
}

.logo-container img {
  max-width: 30%; /* 图片宽度不超过容器宽度 */
  height: auto; /* 保持图片比例 */
}
</style>
